<template>
    <div>
        <el-form ref="querySpaceDataRef" :inline="true" :model="querySpace" class="demo-form-inline" size="medium">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="空间分类" prop="spatialClassification">
                        <el-select v-model="querySpace.spatialClassification" placeholder="请选择类别" clearable>
                            <el-option v-for="item in spatialClassificationList" :key="item.value"
                                :label="item.spatialClassificationName" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="空间名称" prop="spaceName">
                        <el-input v-model="querySpace.spaceName" placeholder="请输入空间名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='8'>
                    <el-form-item>
                        <el-button type="info" @click="onSubmit">查 询</el-button>
                        <el-button type="info" @click="SpaceDataResetForm()">重 置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-button type="info" @click="addSpace" size="medium"> 新 建 </el-button>
        <el-button type="info" size="medium">批量删除</el-button>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index" :index="indexMethod" label="序号">
            </el-table-column>
            <el-table-column prop="spatialState" label="空间状态">
            </el-table-column>
            <el-table-column prop="classification" label="所属分类" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="spaceName" label="空间名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="minimumNumber" label="最少人数" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="MaximumNumber" label="最多容纳人数" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address" label="空间状态" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-switch @change="changeSwitch(scope.row)"
                        v-model="scope.row.spatialState == '开放中' ? true : false" active-color="#13ce66"
                        inactive-color="#eaecf0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="详细地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">

                    <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                    <el-button :disabled="scope.row.spatialState == '开放中' ? true : false"
                        @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteSpace(scope.row)"
                        :disabled="scope.row.spatialState == '开放中' ? true : false" type="text"
                        size="small">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.showApage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageNum"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
        <add-form ref="addForm" @submit="handleSubmit"></add-form>

    </div>

</template>

<script>
import AddForm from '@/views/space/bespeak';

export default {
    components: {
        AddForm,
    },
    data() {
        return {
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            // 查询参数
            querySpace: {
                // 空间分类
                spatialClassification: '',
                // 空间分类
                spaceName: ''
            },
            // 空间分类列表
            spatialClassificationList: [
                { spatialClassificationName: '实验室', id: 1 },
                { spatialClassificationName: '图书馆', id: 2 },
            ],
            // 新增空间预约弹窗
            addSpaceDialogVisible: false,

            tableData: [{
                // 空间状态
                spatialState: '开放中',
                // 空间分类
                classification: '图书馆',
                // 空间名称
                spaceName: '阅览室01',
                // 最少人数
                minimumNumber: '1人',
                // 最多人数
                MaximumNumber: '5人',
                // 详细地址
                address: '上海市普陀区金沙江路 1518'
            },
            {
                spatialState: '开放中',
                classification: '图书馆',
                // 空间名称
                spaceName: '阅览室01',
                minimumNumber: '1人',
                MaximumNumber: '5人',
                address: '上海市普陀区金沙江路 1518 弄'
            },
            {
                spatialState: '未开放',
                classification: '图书馆',
                // 空间名称
                spaceName: '阅览室01',
                minimumNumber: '1人',
                MaximumNumber: '5人',
                address: '上海市普陀区金沙江路 1518 弄'
            },
            {
                spatialState: '开放中',
                classification: '图书馆',
                // 空间名称
                spaceName: '阅览室01',
                minimumNumber: '1人',
                MaximumNumber: '5人',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                spatialState: '开放中',
                classification: '图书馆',
                // 空间名称
                spaceName: '阅览室01',
                minimumNumber: '1人',
                MaximumNumber: '5人',
                address: '上海市普陀区金沙江路 1518 弄'
            }],

        }
    },
    methods: {
        // 删除预约空间
        deleteSpace() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 不足两位数 补0操作
        indexMethod(index) {
            return (index + 1).toString().padStart(2, '0');
        },
        handleSubmit() {

        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 新增
        addSpace() {
            // 弹出新增表单弹框
            this.$refs.addForm.openDialog();
            this.addSpaceDialogVisible = true
        },
        // 查询
        onSubmit() {
            console.log(this.querySpace, 'submit');
        },
        // 重置查询表单
        SpaceDataResetForm() {
            this.$refs.querySpaceDataRef.resetFields();
        },
        // 下拉框选择
        handleSelectionChange() {

        },
        // 切换状态
        // 拿到状态值发请求改变
        changeSwitch(e) {
            console.log(e,);
        },
        // 每页条数
        handleSizeChange(e) {
            this.pagination.pageNum = e
            // 重新掉一下数据
        },
        // 当前第几页
        handleCurrentChange(val) {
            this.pagination.showApage = val
            // 重新掉一下数据
        },
        handleClose() {

        },
        handleClick(e) {
            // this.$refs.addApproves.openDialog()
        },
        addApproves() {

        }
    }
}
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>